<template>
  <!-- 这是首页————疾病百科 -->
  <div class="HomeDisease">
    <!-- 头部区域 -->
    <van-search
      v-model="value"
      placeholder="搜索症状、疾病"
      shape="round"
      @click="goTosearch"
    >
      <template #left>
        <van-icon name="arrow-left" @click="onClickLeft" />
      </template>
    </van-search>
    <!-- 侧边导航 -->
    <div class="bigbanner">
      <div class="nav">
        <van-sidebar v-model="active" @change="onChange">
          <van-sidebar-item
            :title="item.title"
            v-for="(item, index) in Diseaselist"
            :key="index"
          />
        </van-sidebar>
      </div>
      <div class="banner">
        <div class="ul">
          <li v-for="(item, index) in childrenlist" :key="index">
            <p>{{ item }}</p>
          </li>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, onMounted, nextTick } from "vue";
import { useRouter } from "vue-router";
import BScroll from "@better-scroll/core";
// import { Toast } from "vant";
import { getDiseaselistApi } from "../utils/api";
export default {
  setup() {
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    const goTosearch = () => {
      router.push("/homesearch");
    };
    let bs = ref(null);
    let bs2 = ref(null);
    let bs3 = ref(null);
    const value = ref("");
    const active = ref(0);
    // const onChange = (index) => Toast(`标签名 ${index + 1}`);
    const onChange = (index) => {
      // console.log(index);
      getDiseaselistApi({
        token: sessionStorage.getItem("token"),
      })
        .then((res) => {
          childrenlist.value = res.result[index].children;
        })
        .then(() => {
          bs3 = new BScroll(".banner", {
            scrollY: true,
            scrollX: false,
            click: true,
          });
        });
    };
    const Diseaselist = ref("");
    const childrenlist = ref("");
    onMounted(async () => {
      const res = await getDiseaselistApi({
        token: sessionStorage.getItem("token"),
      });
      Diseaselist.value = res.result;
      // console.log(res.rs);
      await nextTick();
      bs = new BScroll(".nav", {
        scrollY: true,
        scrollX: false,
        click: true,
      });
      bs2 = new BScroll(".banner", {
        scrollY: true,
        scrollX: false,
        click: true,
      });
      // console.log(res.result);
      // childrenlist.value=res.result.index.children
      // console.log(childrenlist.value);
    }, onChange(0));
    return {
      value,
      active,
      onChange,
      onClickLeft,
      Diseaselist,
      childrenlist,
      bs,
      bs2,
      bs3,
      goTosearch,
    };
  },
};
</script>
<style lang="less" scoped>
.HomeDisease {
  width: 100%;
  overflow: hidden;
  height: 100%;
  position: fixed;
  .van-search {
    width: 100%;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;
  }
  .bigbanner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .nav {
    width: 111px;
    overflow: hidden;
    height: 810px;
  }
  .van-search__content--round {
    margin-left: 20px;
  }
  .van-sidebar {
    width: 100px;
    display: inline-block;
    .van-sidebar-item {
      height: 60px;
      border: 1px solid #fff;
    }
  }
}
.banner {
  width: 265px;
  overflow: hidden;
  height: 400px;
  .ul {
    display: inline-block;
    width: 90%;
    li {
      text-align: start;
      font-size: 20px;
      width: 100%;
      height: 60px;
      line-height: 60px;
      border-bottom: 2px solid #f2f2f2;
      p {
        margin-left: 20px;
      }
    }
  }
}
</style>
